<template>
  <view class="login-container">

    <view class="bg-decoration"></view>
    

    <view class="login-card">
      <view class="login-header">
        <text class="login-title">账户登录</text>
        <text class="login-desc">欢迎回来，请登录您的账户</text>
      </view>
      
  
      <form class="login-form" @submit="handleLogin">

        <view class="form-group">
          <view class="input-wrapper">
            <icon type="person" size="20" color="#999"></icon>
            <input 
              type="text" 
              v-model="username"
              placeholder="请输入用户名" 
              placeholder-style="color:#ccc"
              @input="validateUsername"
            />
          </view>
          <text class="error-message" v-if="showUsernameError">{{ usernameError }}</text>
        </view>
        
      
        <view class="form-group">
          <view class="input-wrapper">
            <icon type="lock" size="20" color="#999"></icon>
            <input 
              type="password" 
              v-model="password"
              placeholder="请输入密码" 
              placeholder-style="color:#ccc"
              @input="validatePassword"
            />
            <button 
              type="text" 
              class="toggle-btn" 
              @click="togglePasswordVisibility"
            >
              <icon 
                :type="showPassword ? 'eye-o' : 'eye'" 
                size="20" 
                color="#999"
              ></icon>
            </button>
          </view>
          <text class="error-message" v-if="showPasswordError">{{ passwordError }}</text>
        </view>
        
   
        <view class="form-actions">
          <label class="remember-label">
            <checkbox 
              v-model="rememberMe" 
              color="#007AFF"
            ></checkbox>
            <text>记住密码</text>
          </label>
          <navigator url="/pages/forgot/forgot" class="forgot-link">忘记密码？</navigator>
        </view>
        
    
        <button 
          form-type="submit" 
          class="login-btn" 
          :disabled="!isFormValid"
        >
          登录
        </button>
        
     
        <view class="register-section">
          <text>还没有账号？</text>
          <navigator url="/pages/register/register" class="register-link">立即注册</navigator>
        </view>
      </form>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      showPassword: false,
      rememberMe: false,
   
      showUsernameError: false,
      showPasswordError: false,
      usernameError: '',
      passwordError: ''
    };
  },
  computed: {
  
    isFormValid() {
      return this.username.trim() !== '' && this.password.trim() !== '' 
        && !this.showUsernameError && !this.showPasswordError;
    }
  },
  methods: {
 
    validateUsername() {
      if (this.username.trim() === '') {
        this.showUsernameError = true;
        this.usernameError = '用户名不能为空';
      } else {
        this.showUsernameError = false;
      }
    },
    
    validatePassword() {
      if (this.password.trim() === '') {
        this.showPasswordError = true;
        this.passwordError = '密码不能为空';
      } else if (this.password.length < 6) {
        this.showPasswordError = true;
        this.passwordError = '密码长度不能少于6位';
      } else {
        this.showPasswordError = false;
      }
    },
    
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },
    
  
    handleLogin(e) {
		
      this.validateUsername();
      this.validatePassword();
      
      if (!this.isFormValid) {
        return;
      }
      
      // 模拟登录请求
      uni.showLoading({
        title: '登录中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        
        
        if (this.username === 'admin' && this.password === '123456') {
         
          uni.showToast({
            title: '登录成功',
            icon: 'success',
            duration: 2000
          });
          
          if (this.rememberMe) {
            uni.setStorageSync('username', this.username);
            uni.setStorageSync('password', this.password);
          } else {
            uni.removeStorageSync('username');
            uni.removeStorageSync('password');
          }
          
       
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            });
          }, 1000);
        } else {
          
          uni.showToast({
            title: '用户名或密码错误',
            icon: 'none',
            duration: 2000
          });
        }
      }, 1500);
    }
  },
  onLoad() {
  
    const savedUsername = uni.getStorageSync('username');
    const savedPassword = uni.getStorageSync('password');
    
    if (savedUsername && savedPassword) {
      this.username = savedUsername;
      this.password = savedPassword;
      this.rememberMe = true;
    }
  }
};
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50rpx;
  position: relative;
}

.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300rpx;
  background: linear-gradient(135deg, #007AFF 0%, #0051AA 100%);
  border-radius: 0 0 50% 50% / 20%;
  z-index: 1;
}


.login-card {
  width: 90%;
  max-width: 500rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 50rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  z-index: 2;
}


.login-header {
  text-align: center;
  margin-bottom: 60rpx;
}

.login-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.login-desc {
  font-size: 24rpx;
  color: #666;
  margin-top: 15rpx;
  display: block;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.input-wrapper {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 40rpx;
  transition: border-color 0.3s;
}

.input-wrapper:focus-within {
  border-color: #007AFF;
}

.input-wrapper input {
  flex: 1;
  height: 100%;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.toggle-btn {
  padding: 0;
  margin: 0;
  height: auto;
  line-height: normal;
  background: none;
}

.error-message {
  font-size: 24rpx;
  color: #F53F3F;
  padding-left: 20rpx;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
  font-size: 24rpx;
}

.remember-label {
  display: flex;
  align-items: center;
  gap: 10rpx;
  color: #666;
}

.forgot-link {
  color: #007AFF;
  text-decoration: none;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 30rpx;
  border-radius: 45rpx;
  background-color: #007AFF;
  color: #fff;
  margin-top: 20rpx;
}

.login-btn:disabled {
  background-color: #ccc;
}

.register-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rpx;
  margin-top: 40rpx;
  font-size: 26rpx;
  color: #666;
}

.register-link {
  color: #007AFF;
  text-decoration: none;
  font-weight: 500;
}
</style>
